<template>
<div class="updateUseMobile_wrap">
  <el-form ref="form" :model="form" :rules="rules"  label-position="right" align="right" label-width="100px">
    <el-form-item label="当前手机号">
      <el-input v-model="form.mobile" disabled></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="identifyingCode">
      <el-input class="code_input" v-model="form.identifyingCode"></el-input><el-button :disabled="butState" class="code_but" type="primary" @click="getCode">{{code_value}}</el-button>
    </el-form-item>
      <el-form-item label="新手机号" prop="newMobile">
        <el-input v-model="form.newMobile"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="passwords">
        <el-input v-model="form.passwords" type="password"></el-input>
      </el-form-item>
      <el-button type="primary" @click="save">确认</el-button>
  </el-form>
</div>
</template>
<script>
export default {
  data(){
    return{
      rules:{
        newMobile:[
            { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        identifyingCode:[
            { required: true, message: '请输入验证码', trigger: 'blur' }
        ]
      },
      form:{
        identifyingCode:'',
        mobile:'',
        newMobile:'',
        passwords:'',
        uid:''
      },
      butState:false,
      code_value:"获取",
      wornMobile:""
    }
  },
  methods:{
    save(){
      this.$refs['form'].validate((valid) => {
         if (valid) {
           this.$post("/userLogin/updateUserLoginInfoByUid",this.form,(data)=>{
             this.$message({
                message: '成功',
                type: 'success'
              });
           },(err)=>{
              this.$message.error(err);
           });
         }
         else{
             this.$message.error("拜托！请先填好再提交啦");
         }
      })
    },
    getCode(){
      let form = {
        codeType:3,
        mobile:this.form.mobile
      }
      this.$post("/userLogin/phoneCode",form,(data)=>{
        this.$message({
           message: '验证码已发送到您手机上请注意查收',
           type: 'success'
         });
        console.log(data);
      },(err)=>{
         this.$message.error(err);
      });
      this.butState = true;
      let time = 59;
      let intertimer = setInterval(()=>{
        time--;
        this.code_value = time+"s";
        if(time === 0){
          clearInterval(intertimer);
          this.code_value = "获取";
          this.butState = false;
        }
      },1000);
    }
  },
  mounted(){
    this.form.mobile = this.$store.getters.userMobile;
    this.form.uid = this.$store.getters.userUid;
  }
}
</script>
<style lang="scss">
.updateUseMobile_wrap{
  width:500px;
  margin:0 auto;
  .code_but{
    width:30%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .code_input{
    width: 70%;
    .el-input__inner{
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}
</style>
